<template>
  <div class="container">
    <div class="left-side sec-card">
      <div class="user-info">
        <div class="user-context">
          <div class="user-msg">
            <img src="@/assets/avatar.png">
            <div class="nickname">{{ topicUser.alias || topicUser.username }}</div>
          </div>
        </div>
        <div class="user-detail">
          <div class="user-score">
            积分：{{ topicUser.score }}
          </div>
          <div class="join-date">
            入驻：{{ dayjs(topicUser.createTime).format("YYYY/MM/DD HH:MM:ss") }}
          </div>
          <div class="user-intro">
            简介：{{ topicUser.bio }}
          </div>
        </div>
      </div>
    </div>
    <div class="topics sec-card">
      <div class="list-head">
        话题
      </div>
      <div class="topic-list">
        <div v-for="(item, index) in topics" :key="index" class="topic-item">
          <div class="title">
            <router-link :to="{ name: 'post-detail', params: { id: item.id } }">
              {{ item.title }}
            </router-link>
          </div>
          <div class="create-time">
            发布于:{{ dayjs(item.createTime).format("YYYY/MM/DD HH:mm:ss") }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getInfoByName } from '@/api/user'
import pagination from '@/components/Pagination/index'


export default {
  name: 'Profile',
  components: { pagination },
  data() {
    return {
      topicUser: {},
      topics: {},
      page: {
        current: 1,
        size: 5,
        total: 0
      }
    }
  },
  created() {
    this.fetchUserById()
  },
  methods: {
    fetchUserById() {
      getInfoByName(this.$route.params.username, this.page.current, this.page.size).then((res) => {
        const { data } = res
        this.topicUser = data.user
        this.page.current = data.topics.current
        this.page.size = data.topics.size
        this.page.total = data.topics.total
        this.topics = data.topics.records
      })
    }

  }
}
</script>

<style scoped>
.container{
  margin: auto;
  margin-top: 64px;
  width: 56%;
  display: flex;
}

.topics{
  background-color: #fff;
  flex: 3;
  padding: 6px;
}
.left-side{
  flex: 1;
  margin-right: 24px;

}

.user-info {
  background-color: #fff;
  padding: 20px;
}
.user-info .user-context{
  display: flex;
  justify-content: center;
  border-bottom: 1px solid rgba(219, 219, 219, 0.5);
}
.user-info .user-context img{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  justify-content: center;
}
.user-info .user-context .nickname{
  padding-bottom: 10px;
  margin-top: 6px;
  display: flex;
  justify-content: center;
  font-size: 16px;
}
.user-detail{
  font-size: 14px;
}
.user-detail div{
  padding: 6px;
}
.list-head{
  font-size: 16px;
  padding: 10px;
  border-bottom: 1px solid rgba(219, 219, 219, 0.5);
}
.topic-item{
  height: 60px;
  font-size: 14px;
  border-bottom: 1px solid rgba(219, 219, 219, 0.5);
}
.topic-item div{
  margin: 6px;
}
@media (max-width: 768px) {
  /*.wrapper .header{*/
  /*  width: 100%;*/
  /*}*/
  .container {
    width: 100%;
    display: block;
    margin: auto;
    margin-top: 64px;
  }
  .left-side{
    background-color: #fff;
    width: 100%;
  }
  .topics{
    margin-top: 5%;
    width: 100%;
  }
}
</style>
